<script setup lang="ts">
import { reactive, ref } from "vue";
import { useMenu } from "@/views/nested/menu3/utils/hook.tsx";
import { transformI18n } from "@/plugins/i18n";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
defineOptions({
  name: "Menu3"
});

const formRef = ref();
const tableRef = ref();
const {
  loading,
  columns,
  openDialog,
  onSearch,
  resetForm,
  handleDelete,
  handleSelectionChange
} = useMenu();

const dialogFormVisible = ref(false);
const dialogVisible = ref(false);
const router = useRouter();

const tableData: User[] = [
  {
    id: 3,
    menuAuth: "理赔",
    menuName: "理赔",
    address: "北京",
    children: [
      {
        id: 31,
        menuAuth: "理赔-核保",
        menuName: "理赔",
        address: "北京",
        children: [
          {
            id: 311,
            menuAuth: "理赔-核保-出单",
            menuName: "理赔",
            address: "北京",
            children: [
              {
                id: 3112,
                menuAuth: "理赔-核保-出单-售后",
                menuName: "理赔",
                address: "北京"
              }
            ]
          }
        ]
      },
      {
        id: 32,
        menuAuth: "理赔-承保",
        menuName: "理赔",
        address: "北京",
        children: [
          {
            id: 321,
            menuAuth: "理赔-承保-出单",
            menuName: "理赔",
            address: "北京"
          }
        ]
      }
    ]
  },
  {
    id: 4,
    menuAuth: "理赔",
    menuName: "理赔",
    address: "北京",
    children: [
      {
        id: 41,
        menuAuth: "理赔-核保",
        menuName: "理赔",
        address: "北京",
        children: [
          {
            id: 411,
            menuAuth: "理赔-核保-出单",
            menuName: "理赔",
            address: "北京",
            children: [
              {
                id: 4111,
                menuAuth: "理赔-核保-出单-售后",
                menuName: "理赔",
                address: "北京"
              }
            ]
          }
        ]
      },
      {
        id: 32,
        menuAuth: "理赔-承保",
        menuName: "理赔",
        address: "北京",
        children: [
          {
            id: 321,
            menuAuth: "理赔-承保-出单",
            menuName: "理赔",
            address: "北京"
          }
        ]
      }
    ]
  }
];

interface User {
  id: number;
  menuAuth: string;
  menuName: string;
  address: string;
  hasChildren?: boolean;
  children?: User[];
}

const form1 = reactive({
  firstMenu: "",
  secondMenu: "",
  thirdMenu: "",
  fourthMenu: ""
});

const onSubmit = () => {
  ElMessage.error("保存失败");
};
const form = reactive({
  menuCode: Math.random().toString(36).substr(2, 9),
  menuName: "理赔",
  menuLevel: "1",
  appSystem: "理赔系统",
  upperMenu: "无",
  routerUrl: "111",
  menuRemark: "111",
  sort: "0"
});
const optionApp = [
  { label: "理赔", value: "claim" },
  { label: "双核", value: "undrt" }
];
const options = [
  {
    value: "guide",
    label: "Guide",
    children: [
      {
        value: "disciplines",
        label: "Disciplines",
        children: [
          {
            value: "consistency",
            label: "Consistency"
          },
          {
            value: "feedback",
            label: "Feedback"
          },
          {
            value: "efficiency",
            label: "Efficiency"
          },
          {
            value: "controllability",
            label: "Controllability"
          }
        ]
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "side nav",
            label: "Side Navigation"
          },
          {
            value: "top nav",
            label: "Top Navigation"
          }
        ]
      }
    ]
  },
  {
    value: "component",
    label: "Component",
    children: [
      {
        value: "basic",
        label: "Basic",
        children: [
          {
            value: "layout",
            label: "Layout"
          },
          {
            value: "color",
            label: "Color"
          },
          {
            value: "typography",
            label: "Typography"
          },
          {
            value: "icon",
            label: "Icon"
          },
          {
            value: "button",
            label: "Button"
          }
        ]
      },
      {
        value: "form",
        label: "Form",
        children: [
          {
            value: "radio",
            label: "Radio"
          },
          {
            value: "checkbox",
            label: "Checkbox"
          },
          {
            value: "input",
            label: "Input"
          },
          {
            value: "input-number",
            label: "InputNumber"
          },
          {
            value: "select",
            label: "Select"
          },
          {
            value: "cascader",
            label: "Cascader"
          },
          {
            value: "switch",
            label: "Switch"
          },
          {
            value: "slider",
            label: "Slider"
          },
          {
            value: "time-picker",
            label: "TimePicker"
          },
          {
            value: "date-picker",
            label: "DatePicker"
          },
          {
            value: "datetime-picker",
            label: "DateTimePicker"
          },
          {
            value: "upload",
            label: "Upload"
          },
          {
            value: "rate",
            label: "Rate"
          },
          {
            value: "form",
            label: "Form"
          }
        ]
      },
      {
        value: "data",
        label: "Data",
        children: [
          {
            value: "table",
            label: "Table"
          },
          {
            value: "tag",
            label: "Tag"
          },
          {
            value: "progress",
            label: "Progress"
          },
          {
            value: "tree",
            label: "Tree"
          },
          {
            value: "pagination",
            label: "Pagination"
          },
          {
            value: "badge",
            label: "Badge"
          }
        ]
      },
      {
        value: "notice",
        label: "Notice",
        children: [
          {
            value: "alert",
            label: "Alert"
          },
          {
            value: "loading",
            label: "Loading"
          },
          {
            value: "message",
            label: "Message"
          },
          {
            value: "message-box",
            label: "MessageBox"
          },
          {
            value: "notification",
            label: "Notification"
          }
        ]
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "menu",
            label: "Menu"
          },
          {
            value: "tabs",
            label: "Tabs"
          },
          {
            value: "breadcrumb",
            label: "Breadcrumb"
          },
          {
            value: "dropdown",
            label: "Dropdown"
          },
          {
            value: "steps",
            label: "Steps"
          }
        ]
      },
      {
        value: "others",
        label: "Others",
        children: [
          {
            value: "dialog",
            label: "Dialog"
          },
          {
            value: "tooltip",
            label: "Tooltip"
          },
          {
            value: "popover",
            label: "Popover"
          },
          {
            value: "card",
            label: "Card"
          },
          {
            value: "carousel",
            label: "Carousel"
          },
          {
            value: "collapse",
            label: "Collapse"
          }
        ]
      }
    ]
  },
  {
    value: "resource",
    label: "Resource",
    children: [
      {
        value: "axure",
        label: "Axure Components"
      },
      {
        value: "sketch",
        label: "Sketch Templates"
      },
      {
        value: "docs",
        label: "Design Documentation"
      }
    ]
  }
];
const openDialogAdd = () => {
  dialogVisible.value = true;
};
const update = () => {
  dialogFormVisible.value = true;
};
const props = { multiple: true };
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form1"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="应用名称：" prop="title">
        <el-select
          v-model="form1.firstMenu"
          placeholder="请选择应用名称"
          clearable
          class="!w-[180px]"
        >
          <el-option
            v-for="item in optionApp"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="菜单管理"
      :columns="columns"
      :isExpandAll="false"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
    >
      <template #buttons>
        <el-button
          type="primary"
          :icon="useRenderIcon(AddFill)"
          @click="openDialogAdd()"
        >
          新增菜单
        </el-button>
      </template>
      <template v-slot="{}">
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          default-expand-all
        >
          <el-table-column
            prop="menuAuth"
            label="菜单权限"
            align="center"
            sortable
          />
          <el-table-column
            prop="menuName"
            label="菜单所属"
            align="center"
            sortable
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="400px"
            align="center"
          >
            <template v-slot="{}">
              <el-button size="small" type="primary" @click="update()"
                >修改</el-button
              >
              <el-button size="small" type="primary">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </PureTableBar>
    <el-dialog v-model="dialogFormVisible" title="修改菜单" width="500">
      <el-form :model="form">
        <el-form-item label="菜单代码">
          <el-input v-model="form.menuCode" autocomplete="off" />
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="form.menuName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="菜单级别">
          <el-input v-model="form.menuLevel" autocomplete="off" />
        </el-form-item>
        <el-form-item label="应用系统">
          <el-input v-model="form.appSystem" autocomplete="off" />
        </el-form-item>
        <el-form-item label="展示顺序">
          <el-input v-model="form.sort" autocomplete="off" />
        </el-form-item>
        <el-form-item label="路由地址">
          <el-input v-model="form.routerUrl" autocomplete="off" />
        </el-form-item>
        <el-form-item label="菜单描述">
          <el-input v-model="form.menuRemark" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible" title="增加菜单" width="500">
      <el-form
        :model="form"
        label-width="auto"
        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
      >
        <el-form-item label="菜单代码">
          <el-input v-model="form.menuCode" disabled />
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="form.menuName" />
        </el-form-item>
        <el-form-item label="菜单级别">
          <el-select v-model="form.menuLevel" placeholder="请选择菜单级别">
            <el-option label="四级菜单" value="fourthLevel" />
          </el-select>
        </el-form-item>
        <el-form-item label="应用系统">
          <el-select
            v-model="form.appSystem"
            placeholder="请选择应用系统"
            clearable
          >
            <el-option
              v-for="item in optionApp"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="展示顺序">
          <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item label="路由地址">
          <el-input v-model="form.routerUrl" />
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-cascader
            v-model="form.upperMenu"
            placeholder="请选择上级菜单"
            :options="options"
            :props="props"
            filterable
          />
        </el-form-item>
        <el-form-item label="菜单描述">
          <el-input v-model="form.menuRemark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) {
  height: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
